<!-- 分类 -->
<template>
	<view>
		<view class="nav">
			<view class="list" v-for="(k,i) in navLists" :style="{'background':k.isAct?'#f2f3f5':'#ffffff'}"
				@click="navAct(k)">
				<view v-show="k.isAct"></view>
				<text :style="{'color':k.isAct?'#29C563':'#333333'}">{{k.name}}</text>
			</view>
		</view>
		<view class="body">
			<view class="title">
				<view></view>
				<text>{{title}}</text>
				<view></view>
			</view>
			<view class="list" v-for="(k,i) in goodsMsg">
				<view class="box">
					<image src="/static/images/background/course/2.webp" mode="aspectFill"></image>
					<view class="price">
						￥<text>9999.00</text>
					</view>
					<view class="pay">
						立即报名
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//body标题
				title: '',
				//导航栏列表
				navLists: [{
						name: '分类1',
						isAct: true,
					},
					{
						name: '分类2',
						isAct: false,
					},
					{
						name: '分类3',
						isAct: false,
					},
					{
						name: '分类4',
						isAct: false,
					},
					{
						name: '分类5',
						isAct: false,
					},
					{
						name: '分类6',
						isAct: false,
					},
					{
						name: '分类7',
						isAct: false,
					},
					{
						name: '分类8',
						isAct: false,
					},
					{
						name: '分类9',
						isAct: false,
					},
					{
						name: '分类10',
						isAct: false,
					},
					{
						name: '分类11',
						isAct: false,
					},
					{
						name: '分类12',
						isAct: false,
					},
					{
						name: '分类13',
						isAct: false,
					},
					{
						name: '分类14',
						isAct: false,
					},
				],
				//商品列表
				goodsMsg: [{
					pic: '/static/images/background/course/2.webp',
					price: '',
				}, {
					pic: '/static/images/background/course/2.webp',
					price: '',
				}, {
					pic: '/static/images/background/course/2.webp',
					price: '',
				}, {
					pic: '/static/images/background/course/2.webp',
					price: '',
				}, {
					pic: '/static/images/background/course/2.webp',
					price: '',
				}, {
					pic: '/static/images/background/course/2.webp',
					price: '',
				}],
			}
		},
		methods: {
			navAct(item) {
				for (let a = 0; a < this.navLists.length; a++) {
					this.navLists[a].isAct = false
				}
				item.isAct = true
				this.title = item.name
			},
		},
		onLoad() {
			this.title = this.navLists[0].name
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f3f5;
	}

	// 导航栏
	.nav {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		height: 1130rpx;
		box-sizing: border-box;
		// max-height: 1102rpx;
		width: 210rpx;
		overflow-y: auto;

		.list {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 210rpx;
			height: 112rpx;
			min-height: 112rpx;
			background: #f2f3f5;

			text {
				font-size: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: left;
				color: #29c563;
			}

			;

			view {
				position: absolute;
				left: 0;
				width: 8rpx;
				height: 112rpx;
				background: #29c563;
			}
		}
	}

	//列表
	.body {
		position: fixed;
		right: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 540rpx;
		height: 1130rpx;
		box-sizing: border-box;
		overflow-y: auto;

		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 30rpx 0;

			text {
				font-size: 24rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: center;
				color: #666666;
				margin: 0 11rpx;
			}

			;

			view {
				width: 71rpx;
				height: 2rpx;
				background: #e3e3e3;
			}

			;
		}

		;

		.list {
			margin-bottom: 20rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 8rpx;

			.box {
				position: relative;
				width: 432rpx;
				height: 225rpx;
				background: #f4f5f7;
				border-radius: 0rpx 0rpx 4rpx 4rpx;

				image {
					position: absolute;
					top: 0;
					left: 0;
					height: 176rpx;
					width: 432rpx;
				}

				;

				.price {
					position: absolute;
					bottom: 14rpx;
					left: 11rpx;
					font-size: 17rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Regular;
					font-weight: 400;
					text-align: center;
					color: #f93030;

					text {
						font-size: 24rpx;
						font-family: Source Han Sans CN, Source Han Sans CN-Bold;
						font-weight: 700;
						text-align: left;
					}
				}

				;

				.pay {
					position: absolute;
					right: 17rpx;
					bottom: 6rpx;
					width: 113rpx;
					height: 37rpx;
					background: linear-gradient(134deg, #54d685, #29c563 99%);
					border-radius: 19rpx;
					font-size: 20rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Medium;
					font-weight: 500;
					text-align: center;
					color: #ffffff;
					line-height: 37rpx;
				}
			}
		}
	}
</style>
